<template>
  <view class="home">
    <image src="@/static/img/1.png" class="ntop" mode="widthFix"></image>

    <image
      src="@/static/img/2.png"
      @click="go('/pages/index/post')"
      class="ntop1"
      mode="widthFix"
    ></image>
    <image
      src="@/static/img/3.png"
      @click="go('/pages/index/table')"
      class="ntop1 ntop2"
      mode="widthFix"
    ></image>
    <image
      src="@/static/img/4.png"
      @click="go('/pages/index/list')"
      class="ntop1 ntop2"
      mode="widthFix"
    ></image>
  </view>
</template>

<script>
import { queryDeviceCounts, informationPage } from "@/config/api.js";

export default {
  data() {
    return {};
  },

  onShow(e) {
    // this._getList();
    // if (!uni.getStorageSync("loginTokens")) {
    //   uni.navigateTo({
    //     url: "/pages/login/login",
    //   });
    // }
  },
  mounted() {
    // this.cityName = this.columns[0].name
    // this.fetchData();
  },
  methods: {
    // _getList() {
    //   informationPage({
    //     pageNo: 1,
    //     pageSize: 10,
    //     status: 2,
    //   }).then((res) => {
    //     console.log(res);
    //     if (res.list) {
    //       this.information = res.list;
    //     } else {
    //       this.information = [];
    //     }
    //   });
    // },

    go(e) {
      uni.navigateTo({
        url: e,
      });
    },
    // 数据加载
    async fetchData() {
      try {
        let response = [];
        if (this.tab == 2) {
          response = await queryDeviceCounts(this.page, this.pageSize, "");
        } else {
          response = await queryDeviceCounts(this.page, this.pageSize, 3);
        }
        this.items.push(...response.rows);
        this.page = this.page + 1;
        this.total = response.total;

        if (!response) {
          this.hasMoreData = false;
        }
        this.loading = false;
      } catch (error) {
        console.log("err", error);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hot {
  width: 670rpx;
  float: left;
  margin: 20rpx 40rpx 50rpx;
  background: #fff;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 0 0 30rpx;
}
.hot_hr {
  width: 670rpx;
  height: 50rpx;
  float: left;

  display: block;
  box-sizing: border-box;
  padding: 0 0 30rpx;
}
.hot_box {
  width: 600rpx;
  height: auto;
  float: left;
  margin: 30rpx 35rpx 0;
  border-bottom: 1px solid #ededed;
  box-sizing: border-box;
  padding: 0 0 30rpx;
}
.hot_box:last-child {
  border-bottom: none;
}

.hot_box_l {
  width: 370rpx;
  float: left;
}
.hot_box_l span {
  width: 100%;
  height: auto;
  font-size: 26rpx;
  line-height: 36rpx;
  color: #221815;
  display: block;
  float: left;
  margin: 0 0 25rpx;
}
.hot_box_l p {
  width: 33%;
  height: auto;
  font-size: 20rpx;
  color: #666666;
  float: left;
}
.hot_box_l p:nth-child(2) {
  color: #2d82ff;
}
.hot_box_l p:nth-child(3) {
  color: #f92828;
}
.hot_box_l p image {
  width: 30rpx;
  height: 30rpx;
  display: block;
  float: left;
  margin: 0 10rpx 0 0;
}
.hot_box_r {
  width: 185rpx;
  height: 124rpx;
  display: block;
  float: right;
}

.server {
  width: 670rpx;
  float: left;
  margin: 20rpx 40rpx 50rpx;
  background: #fff;
  border-radius: 10rpx;
}

.server p {
  width: 160rpx;
  height: auto;
  display: block;
  float: left;
  margin: 17rpx 31rpx 25rpx;
}
.server image {
  width: 130rpx;
  height: 91rpx;
  display: block;
  float: left;
  margin: 0 15rpx;
}
.server span {
  width: 100%;
  height: auto;
  text-align: center;
  display: block;
  float: left;
  margin: 8rpx 0 16rpx;
  font-size: 26rpx;
  color: #4c4948;
}

.server i {
  width: 84rpx;
  height: 27rpx;
  line-height: 27rpx;
  border-radius: 100rpx;
  text-align: center;
  display: block;
  float: left;
  margin: 0 38rpx;
  font-size: 18rpx;
  color: #ffffff;
  background: #4f95ff;
  font-style: normal;
}

.finance {
  width: 670rpx;

  float: left;
  margin: 20rpx 40rpx 50rpx;
}
.finance1 {
  width: 320rpx;
  height: 200rpx;
  display: block;
  float: left;
}
.finance p {
  width: 335rpx;
  height: 200rpx;
  display: block;
  float: right;
}
.finance p image {
  width: 100%;
  height: 95rpx;
  margin: 0 0 5rpx;
}
.finance4 {
  width: 670rpx;
  height: 139rpx;
  display: block;
  float: left;
  margin: 20rpx 0 0;
}
.ntitle {
  width: 670rpx;
  height: auto;
  float: left;
  margin: 0 40rpx;
  color: #333333;
  font-size: 34rpx;
}
.ntop {
  width: 655rpx;
  display: block;
  float: right;
  margin: 30rpx 20rpx 20rpx;
}
.ntop1,
.ntop2 {
  height: auto;
  display: block;
  float: left;
  width: 615rpx;
  margin: 0;
  margin: 30rpx 67.5rpx 0;
}

.box1 {
  width: 596rpx;
  height: auto;
  display: block;
  float: left;
  margin: 26rpx 37rpx 0;
  border-bottom: 1px solid #edecec;
  box-sizing: border-box;
  padding: 0 0 22rpx 15rpx;
}

.box1:last-child {
  border: 0;
}

.box1 image {
  width: 185rpx;
  height: 127rpx;
  display: block;
  float: left;
  margin: 0 23rpx 0 0;
}

.box1_r {
  width: 370rpx;
  height: auto;
  display: block;
  float: left;
  margin: 0 0 0 0;
}

.box1_r span {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 0 0 10rpx;
  color: #221815;
  font-size: 26rpx;
}

.box1_r p {
  width: 100%;
  height: 60rpx;
  display: block;
  float: left;
  margin: 0 0 5rpx;
  color: #999999;
  line-height: 30rpx;
  font-size: 22rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.box1_r b {
  width: auto;
  height: auto;
  display: block;
  float: left;
  margin: 0 0 0rpx;
  color: #666666;
  font-size: 18rpx;
  font-style: normal;
}

.box1_r i {
  width: auto;
  height: auto;
  display: block;
  float: right;
  margin: 0 0 0rpx;
  color: #617aed;
  font-size: 18rpx;
  font-style: normal;
}

.post {
  width: 670rpx;
  height: auto;
  display: block;
  float: left;
  margin: 0 40rpx 33rpx;
  border-radius: 14rpx;
  background-color: rgba(255, 255, 255, 0.659);
  box-shadow: 0px 2px 0.93px 0.07px rgba(136, 136, 136, 0.33);
}

.post2 {
  margin-bottom: 50rpx;
}

.box2 {
  width: 596rpx;
  height: auto;
  display: block;
  float: left;
  margin: 26rpx 37rpx 0;
  border-bottom: 1px solid #edecec;
  box-sizing: border-box;
  padding: 0 0 22rpx 15rpx;
}

.box2:last-child {
  border: 0;
}

.box2 image {
  width: 140rpx;
  height: 160rpx;
  display: block;
  float: left;
  margin: 0 30rpx 0 0;
}

.box2_r {
  width: 404rpx;
  height: auto;
  display: block;
  float: left;
  margin: 0 0 0 0;
}

.box2_r span {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: -10rpx 0 10rpx;
  color: #414141;
  font-size: 28rpx;
}

.box2_r p {
  width: 100%;
  height: 120rpx;
  display: block;
  float: left;
  margin: 0 0 5rpx;
  color: #414141;
  line-height: 30rpx;
  font-size: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.box2_r span b {
  width: auto;
  height: 22rpx;
  line-height: 22rpx;
  display: inline-block;
  background: #f40330;
  font-size: 18rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  margin: 20rpx 0 0 0rpx;
  color: #fff;
  border-radius: 30rpx;
  font-style: normal;
}

.title {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 20rpx 0rpx 0rpx;
}

.title i {
  width: 32rpx;
  height: 33rpx;
  display: block;
  float: left;
  margin: 0 12rpx 0 26rpx;
  background: url(https://ryb.ruifengcloud.com/imgs/i9.png) no-repeat;
  background-size: 100%;
}

.title span {
  width: auto;
  height: 33rpx;
  line-height: 33rpx;
  display: block;
  float: left;
  font-size: 30rpx;
  color: #1e72ff;
}

.title p {
  width: auto;
  height: 33rpx;
  line-height: 33rpx;
  display: block;
  float: right;
  font-size: 18rpx;
  color: #f9514b;
  margin: 0rpx 47rpx 0 0rpx;
}

.nav {
  width: 750rpx;
  height: auto;
  display: block;
  float: left;
  background: #f5f5f5;
  border-radius: 20rpx 20rpx 0 0;
  margin: -50rpx 0 0;
  box-sizing: border-box;
  padding: 75rpx 0 20rpx;
  position: relative;
  z-index: 2;

  // background: url(https://ryb.ruifengcloud.com/imgs/new/navbj.png) no-repeat;
  // background-size: 100%;
}

.nav p {
  width: 115rpx;
  height: auto;
  display: block;
  float: left;
  margin: 0rpx 10rpx 40rpx 55rpx;
}

.nav p:nth-child(4n) {
  margin-right: 0;
}

.nav p image {
  width: 115rpx;
  height: auto;
  display: block;
  float: left;
}

.nav p span {
  width: 115rpx;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  font-size: 28rpx;
  color: #4c4948;
  margin: 10rpx 0rpx 0 0rpx;
}

.top {
  width: 670rpx;
  height: auto;
  display: block;
  float: left;
  margin: 30rpx 40rpx 40rpx;
}

.topl {
  width: auto;
  height: auto;
  display: block;
  float: left;
}

.topl_l {
  width: 27rpx;
  height: 33rpx;
  display: block;
  float: left;
  margin: 0 11rpx 0 0;
  background: url(https://ryb.ruifengcloud.com/imgs/i1.png) no-repeat;
  background-size: 100%;
}

.topl span {
  width: auto;
  height: 33rpx;
  line-height: 33rpx;
  display: block;
  float: left;
  margin: 0 11rpx 0 0;
  font-size: 30rpx;
  color: #000000;
  margin: 0 13rpx 0 0;
}

.topl_r {
  width: 21rpx;
  height: 11rpx;
  display: block;
  float: left;
  margin: 14rpx 0 0 0;
  background: url(https://ryb.ruifengcloud.com/imgs/i2.png) no-repeat;
  background-size: 100%;
}

.topr {
  width: auto;
  height: auto;
  display: block;
  float: right;
}

.topr_l {
  width: 31rpx;
  height: 31rpx;
  display: block;
  float: right;
  margin: 0 0 0 21rpx;
  background: url(https://ryb.ruifengcloud.com/imgs/i3.png) no-repeat;
  background-size: 100%;
}

.topr_r {
  width: 29rpx;
  height: 31rpx;
  display: block;
  float: right;
  margin: 0 0 0 21rpx;
  background: url(https://ryb.ruifengcloud.com/imgs/i4.png) no-repeat;
  background-size: 100%;
}

.banner {
  width: 670rpx;
  height: 307rpx;

  float: left;
  margin: 0 40rpx 0;
  border-radius: 20rpx;
  overflow: hidden;
}
.home {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  background: #ffffff;
}

page {
  // background-image: -moz-linear-gradient(90deg, rgb(254, 238, 227) 0%, rgb(224, 194, 133) 100%);
  // background-image: -webkit-linear-gradient(90deg, rgb(254, 238, 227) 0%, rgb(224, 194, 133) 100%);
  // background-image: -ms-linear-gradient(90deg, rgb(254, 238, 227) 0%, rgb(224, 194, 133) 100%);
  overflow: auto;
  background: #fffdf6;
}
.home {
  height: 100vh;
  background: #fffdf6;
}
</style>
